﻿<script setup lang="ts" name="PageDesigner">
import FullScreenWrap from '../FullScreenWrap/index.vue'
import IphoneShell from './components/public/ios/index.vue'
import AndroidShell from './components/public/android/index.vue'
import PageDesignerHeader from './components/designerComponents/pageDesignerHeader.vue'
import WidgetPageComponent from './components/designerComponents/widgetPageComponent.vue'
import WidgetPageProperty from './components/designerComponents/widgetPageProperty.vue'
import DraggableContainer from './components/designerComponents/draggableContainer.vue'
import { useResizeObserver, useDebounceFn } from '@vueuse/core'
const pageConfig: any = ref({
  bgColor: '#ffffff',
  type: 'index',
  widget: [],
  industry: [],
  device: 'pc',
  name: '',
  width: 1500,
  primaryColor: '#1890ff',
  remark: '',
  defaultHeader: false,
  defaultFooter: false,
  isEnable: true
})

const deviceList = [
  {
    value: 'pc',
    label: '桌面端'
  },
  {
    value: 'wap',
    label: '移动端'
  },
  {
    value: 'app',
    label: '小程序'
  }
]
const getDeviceData = (data) => {
  let result = ''
  deviceList.forEach((item) => {
    if (item.label === data) {
      result = item.value
    }
  })
  return result
}
const mainHeight = ref(0)
const contentHeight = ref(0)
// 监听元素尺寸变化
useResizeObserver(
  document.body,
  useDebounceFn(() => {
    getMainHeight()
  }, 200)
)
const getMainHeight = () => {
  const rect = document.body.getBoundingClientRect()
  if (pageConfig.value.device === 'wap') {
    mainHeight.value = rect.height - 48 - 1 - 80
    contentHeight.value = mainHeight.value - 26 - 58 - 20 - 10 - 4 - 26
  } else if (pageConfig.value.device === 'app') {
    mainHeight.value = rect.height - 48 - 1 - 80
    contentHeight.value = mainHeight.value - 40 - 26 - 48
  } else {
    mainHeight.value = rect.height - 48 - 1
  }
}
const draggableContainerRef = ref(null)
const clearFurnish = () => {
  draggableContainerRef.value.clearFurnish()
}

const pagePreviewRef = ref(null)
const pagePreview = () => {
  pagePreviewRef.value.showDialog({ title: '页面预览' })
}

const visible = ref(false)
const pageDesignerTitle = ref('')
const closePageDesigner = () => {
  visible.value = false
}
const widgetPageComponentRef = ref(null)
const widgetPageProperty = ref(null)
const showPageDesigner = (v) => {
  console.log(v, '装修页面获取到的数据')
  visible.value = true
  pageDesignerTitle.value = v.title
  pageConfig.value.device = getDeviceData(v.device)
  getMainHeight()
  nextTick(() => {
    if (pageConfig.value.device === 'pc') {
      widgetPageComponentRef.value.widgetAsideHidden()
      widgetPageProperty.value.propertyAsideHidden()
    } else {
      widgetPageComponentRef.value.widgetAsideShow()
      widgetPageProperty.value.propertyAsideShow()
    }
    widgetPageComponentRef.value.getWidgetList()
  })
}
// 子组件将方法暴露给父组件
defineExpose({ showPageDesigner })

const savePageData = () => {
  console.log('保存页面数据')
}
const isWidgetAsideShow = ref(false)
const isPropertyAsideShow = ref(false)
const widgetAsideChangeHandler = (v) => {
  console.log(v)
  isWidgetAsideShow.value = v.widgetAsideStatus
  isPropertyAsideShow.value = v.propertyAsideStatus
  widgetPageProperty.value.propertyAsideHidden()
}
const propertyAsideChangeHandler = (v) => {
  console.log(v)
  isWidgetAsideShow.value = v.widgetAsideStatus
  isPropertyAsideShow.value = v.propertyAsideStatus
  widgetPageComponentRef.value.widgetAsideHidden()
}

const propertyChangeHandler = (v) => {
  draggableContainerRef.value.propertyChangeHandler(v)
}
const propertyPageChangeHandler = (v) => {
  pageConfig.value.pageSettings = v
}

const widgetPageDragEndHandler = (v) => {
  console.log(v, '祖组件')
  draggableContainerRef.value.widgetPageDragEndHandler(v)
}

const widgetChangeHandler = (v) => {
  widgetPageProperty.value.widgetChangeHandler(v)
}
</script>

<template>
  <el-dialog class="page-designer-dialog" v-model="visible" fullscreen :show-close="false">
    <template #header>
      <PageDesignerHeader :pageDesignerTitle="pageDesignerTitle" @clear="clearFurnish" @preview="pagePreview" @close="closePageDesigner" @save="savePageData"></PageDesignerHeader>
    </template>
    <el-container :class="['page-designer-contanier', isWidgetAsideShow?'is-widget-active':'', isPropertyAsideShow?'is-property-active':'', pageConfig.device]">
      <WidgetPageComponent ref="widgetPageComponentRef" :pageConfig="pageConfig" @widgetAsideChange="widgetAsideChangeHandler" @widgetPageDragEnd="widgetPageDragEndHandler"></WidgetPageComponent>
      <el-main class="center-container">
        <div class="furnish-content">
          <IphoneShell v-if="pageConfig.device==='wap'" :height="mainHeight">
            <el-scrollbar>
              <DraggableContainer ref="draggableContainerRef" :contentHeight="contentHeight" :pageConfig="pageConfig" @widgetChange="widgetChangeHandler"></DraggableContainer>
            </el-scrollbar>
          </IphoneShell>
          <AndroidShell v-else-if="pageConfig.device==='app'" :height="mainHeight">
            <el-scrollbar>
              <DraggableContainer ref="draggableContainerRef" :contentHeight="contentHeight" :pageConfig="pageConfig" @widgetChange="widgetChangeHandler"></DraggableContainer>
            </el-scrollbar>
          </AndroidShell>
          <el-scrollbar v-else>
            <DraggableContainer ref="draggableContainerRef" :contentHeight="mainHeight" :pageConfig="pageConfig" @widgetChange="widgetChangeHandler"></DraggableContainer>
          </el-scrollbar>
        </div>
      </el-main>
      <WidgetPageProperty ref="widgetPageProperty" :pageConfig="pageConfig" @propertyAsideChange="propertyAsideChangeHandler" @propertyChange="propertyChangeHandler" @propertyPageChange="propertyPageChangeHandler"></WidgetPageProperty>
    </el-container>
    <FullScreenWrap ref="pagePreviewRef"></FullScreenWrap>
  </el-dialog>
</template>

<style scoped lang="scss">
.center-container{
  --el-main-padding: 0;

  position: relative;
  right: 0;
  left: 0;
  display: flex;
  flex-basis: inherit;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--el-bg-color-page);
  transition: all 0.3s linear;

  .furnish-content{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .el-scrollbar{
      :deep(.el-scrollbar__wrap){
        overflow-x: hidden;
      }

      :deep(.el-scrollbar__view){
        overflow: hidden;
      }
    }
  }
}
</style>
